import Icon from '@/component/Icon'
import { AppThunk, useAppDispatch, useInitState } from '@/store/hook'
import { activeAction, getUserChannelsAction } from '@/store/reducers/home'
import { Tabs } from 'antd-mobile'
import { useState, lazy } from 'react'
import { useNavigate } from 'react-router-dom'
import ArticleList from './component/ArticleList'
import styles from './index.module.scss'
const Channel = lazy(() => import('./component/Channel'))
const Home = () => {
 const navigate =  useNavigate()
  const dispatch = useAppDispatch()
  const { channels, active } = useInitState(
    getUserChannelsAction as AppThunk,
    'homer'
  )
  // 获取redux的dispatch
  //  const dispatch = useAppDispatch()
  //  const channels = useAppSelector(state => state.homer.channels)
  //  // 调用useEffect获取个人用户信息的接口
  //  useEffect(() => {
  //    dispatch(getUserChannelsAction())
  //  }, [dispatch])
  // 控制频道弹窗
  const [channelShow, setChannelShow] = useState<boolean>(false)
  
  // 设置高亮
  const changeActive = (active: number) => {
    dispatch(activeAction(Number(active)))
  }

  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}
      <div className='tabs'>
        <Tabs activeKey={`${active}`} onChange={key => changeActive(Number(key))}>
          {channels.map(v => (
            <Tabs.Tab title={v.name} key={v.id}>
              {/* {v.name} */}
              <ArticleList channelId={v.id}/>
            </Tabs.Tab>
          ))}
        </Tabs>
      </div>
      <div className='tabs-opration'>
        <Icon type='iconbtn_search' onClick={()=>navigate('/search')}/>
        <Icon type='iconbtn_channel' onClick={() => setChannelShow(true)} />
      </div>
      <Channel
        changeActive={changeActive}
        visible={channelShow}
        close={() => setChannelShow(false)}
      />
    </div>
  )
}

export default Home
